<!DOCTYPE html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1.0" />
	<script src="https://unpkg.com/vue@3.4.27/dist/vue.global.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@2.0.6/css/pico.css">
	<script src="https://unpkg.com/axios@1.7.2/dist/axios.min.js"></script>
	<title>添加教师</title>
</head>
<body>
<div id="app">
	<main class="container">	
		<form style="margin-top: 32px">
			<fieldset>
				<label>
					姓名
					<input name="name" v-model="name" />
				</label>
				<label>
					工号
					<input name="code" v-model="code" />
				</label>
				<label>
					密码
					<input name="password" type="password" v-model="password" />
				</label>

				<label>
					备注
					<input name="remark" v-model="remark" />
				</label>

				<!-- 学院列表供选择： 显示学院名称，取得选中学院的id -->
				<label>
					学院
					<select v-model="collegeId">
						 <option v-for="(item, index) in colleges" :value="item.id"> {{ item.name }}</option>
					</select>
				</label>
				
			</fieldset>

			<button @click.prevent="doAdd" :disabled="!canClick">添加</button>
            <div style="color: rgb(0, 137, 90); display: inline-block; margin-left: 24px" v-if="displaySuccess">
                操作成功，即将返回
            </div>
		</form>
	</main>
</div>

<script>
	const App = {
		data() {
			return {
				id: null,
				name: "",
				code: "",
				password: "",
				remark: "",
				collegeId: null,			// 选中的学院id
				
				colleges: [],				// 学院列表

				canClick: true,
                displaySuccess: false,
			};
		},

		methods: {
			init() {
				this.canClick = false;
                let vueInstance = this;

                // 取得学院列表，显示在select的选项中
				let url = "/colleges";				
				axios.get(url).then(function(response) {
					console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

					if(response.status == 200 && response.data != null 
						&& response.data.code === 200 && response.data.data.rows != null) {
						vueInstance.canClick = true;

						vueInstance.colleges = response.data.data.rows;
					}
					else {
						console.log("后端代码出错了，检查后端log");
					}
				})
				.catch(function (error) {
					console.log("访问出错了：", error);
                    console.log("地址：", url);
				});					
			},

			doAdd() {						
				const url = "/teachers";
				const formData = {
					name: this.name,
					code: this.code,
					password: this.password,
					collegeId: this.collegeId,
					remark: this.remark,
				};

				this.canClick = false;
                let vueInstance = this;

				axios.post(url, formData).then(function(response) {
					console.log("响应的状态码：", response.status);
                    console.log("响应的数据：", JSON.stringify(response.data));

                    if(response.status == 200 && response.data != null && response.data.code === 200) {
                        vueInstance.displaySuccess = true;
						
                        window.setTimeout(() => {
                            window.location.href = "/teacher-list.html";
                        }, 1000);
                    }
                    else {
                        console.log("后端代码出错了，检查后端log");
                    }
                })
                .catch(function (error) {
                    console.log("访问出错了：", error);
                    console.log("地址：", url);
                    console.log("数据：", formData);
                });
			}
		},
		mounted() {
			this.init();
		}
	};

	const app = Vue.createApp(App);
	app.mount("#app");
</script>
</body>
</html>